<template>
	<div class="add-group">
		<el-dialog title="新增分组" :visible.sync="showAddGroup" width="45%" :before-close="cancelAddGroup">
			<el-form :model="groupData" ref="addGroupRef" label-width="100px" @submit.native.prevent>
				<el-form-item prop="name" label="分组名称" :rules="groupData.groupNameRules">
					<el-input v-model="groupData.name"></el-input>
				</el-form-item>
				<!--  todo 派工规则的功能修改为业务场景配置项
					<el-form-item label="派工规则" :rules="groupData.groupWorkRules">
					<el-radio-group v-model="groupData.defaultPolicy">
						<el-radio :label="item.id" v-for="item in defaultPolicy" :key="item.id">{{ item.name }}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item v-for="(item, index) in groupData.customizedPolicy" :key="index" class="rules">
					<el-input v-model="item.name" placeholder="规则名称"></el-input>
					<el-select v-model="item.attribute" placeholder="请选择规则属性" @change="selectProp">
						<el-option :label="rules" :value="rules" v-for="(rules, index) in groupData.rulesProp" :key="index"></el-option>
					</el-select>
					<el-select v-model="item.rules" placeholder="请选择规则顺序" :disabled="item.attribute == ''">
						<el-option :label="option.value" :value="option.id" v-for="option in policyRules" :key="option.id"></el-option>
					</el-select>
					<el-input
						type="text"
						placeholder="点击选择属性并排序"
						v-show="item.rules === 'customized'"
						readonly="readonly"
						v-model="item.customizedRules"
						class="selectproperty"
						@dblclick.native="selectProperty(item.attribute, index)"
					/>
					<i class="el-icon-close" @click="removeRules(index)"></i> -->
				<!-- 自定义属性对话框 -->
				<!-- <el-dialog title="自定义排序" :visible.sync="setCustomRule" :before-close="cancelCustomProp" append-to-body>
						<el-input v-model="defaultValue" readonly placeholder="自定义顺序"></el-input>
						<div class="check-box" style="padding-top: 10px;">
							<label for="">可选值</label>
							<el-checkbox-group v-model="chooseCustomProp">
								<el-checkbox v-for="(prop, index) in setCustomProps" :label="prop" :key="index">{{ prop }}</el-checkbox>
							</el-checkbox-group>
						</div>
						<span slot="footer" class="dialog-footer">
							<el-button type="primary" @click="cancelCustomProp">确 定</el-button>
						</span>
					</el-dialog>
				</el-form-item>
				<el-form-item>
					<el-button @click="addRules">自定义派工规则</el-button>
				</el-form-item> -->
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelAddGroup">取 消</el-button>
				<el-button type="primary" @click="getAddProps">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { getAttributeValues } from '../../api/api';

export default {
	props: {
		showAddGroup: {
			type: Boolean,
			default: () => false
		},
		addGropusData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			defaultValue: '',
			setCustomRule: false,
			setCustomProps: '',
			chooseCustomProp: [],
			groupData: this.addGropusData,
			defaultPolicy: [
				{ id: 'least-used', name: '闲时最长' },
				{ id: 'last-used', name: '最近使用' },
				{ id: 'idlest', name: '最早使用' },
				{ id: 'random', name: '随机' },
				{ id: 'round-robin', name: '循环指派' }
			],
			policyRules: [
				{ id: 'asc', value: '正序' },
				{ id: 'desc', value: '倒序' },
				{ id: 'customized', value: '自定义排序' }
			],
			currentIndex: ''
		};
	},
	watch: {
		chooseCustomProp() {
			this.defaultValue = this.chooseCustomProp.join();
		}
	},
	methods: {
		cancelAddGroup() {
			this.$refs['addGroupRef'].resetFields();
			this.$emit('cancelAddGroup');
		},
		addRules() {
			this.defaultValue = '';
			this.$emit('addRules');
		},
		getAddProps() {
			this.$refs['addGroupRef'].validate(valid => {
				if (valid) {
					this.$emit('getAddProps', this.groupData);
				} else {
					this.$message.error('请填写完整信息！');
				}
			});
		},
		removeRules(index) {
			this.$emit('removeRules', index);
		},
		// selectProp(val) {
		// 	this.ruleProperty = val
		// },
		cancelCustomProp() {
			this.setCustomRule = false;
			this.chooseCustomProp = [];
			this.$emit('cancelCustomProp', this.defaultValue, this.currentIndex);
		},

		selectProperty(value, index) {
			if (!value) {
				this.$message.info('您还未选择规则和属性');
				return;
			}
			getAttributeValues(value).then(res => {
				if (res.status === 200) {
					this.setCustomProps = res.data.data;
				}
			});
			this.setCustomRule = true;
			this.currentIndex = index;
		}
	}
};
</script>

<style lang="less" scoped>
.add-group {
	.rules {
		display: flex;
		.el-input,
		.el-select {
			width: 20%;
		}
		i {
			cursor: pointer;
		}
	}
}
</style>
